<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册</title>
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/css_pc_init.css">
    <link rel="stylesheet" href="../css/bootstrap-datetimepicker.css">
</head>

<body>
    <header>
        <div class="header">
            <div class="header-nav">
                <h1 class="header-logo">
                    <a href="index.html">
                        <img src="../images/logo.png" alt="21cake logo" />
                    </a>
                </h1>
                <ul class="nav-box">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="cake.html" target="_self">蛋糕</a></li>
                    <li><a href="bread.html" target="_self">面包</a></li>
                    <li><a href="ice-cream.html" target="_self">冰淇淋</a></li>
                    <li><a href="coffee-tea.html" target="_self">咖啡下午茶</a></li>
                    <li><a target="_self">咖啡全国送</a></li>
                    <li><a target="_self">企业专区</a></li>
                </ul>
                <div class="right-city-user">
                    <a class="header-app app-download">APP下载</a>
                    <div class="current-city">上海<i></i></div>
                    <a class="header-message">消息</a>
                    <span class="not-login"><a href="login.html">登录</a>/<a href="register.html">注册</a></span>
                    <a class="header-user">
                        <img src="../images/user-img.png" alt="21cake user icon" />
                    </a>
                    <a href="cart.html" class="header-cart">
                        <i></i>
                    </a>
                    <ul class="current-city-list  header-select">
                        <li><a href="javascript:void(0);" class="city-id-1">上海</a></li>
                        <li><a href="javascript:void(0);" class="city-id-2">北京</a></li>
                        <li><a href="javascript:void(0);" class="city-id-3">天津</a></li>
                        <li><a href="javascript:void(0);" class="city-id-4">杭州</a></li>
                        <li><a href="javascript:void(0);" class="city-id-5">无锡</a></li>
                        <li><a href="javascript:void(0);" class="city-id-6">苏州</a></li>
                        <li><a href="javascript:void(0);" class="city-id-7">广州</a></li>
                        <li><a href="javascript:void(0);" class="city-id-8">深圳</a></li>
                    </ul>
                    <ul class="header-user-list  header-select">
                        <li><a target="_blank">我的订单</a></li>
                        <li><a target="_blank">我的优惠券</a></li>
                        <li><a target="_blank">我的纪念日</a></li>
                        <li><a class="logout" target="_self">退出登录</a></li>
                    </ul>
                    <ul class="message-list-header  header-select">
                        <li><a target="_blank">通知</a></li>
                        <li><a target="_blank">物流</a></li>
                    </ul>
                    <dl class="app-list  header-select">
                        <dt>
                            <img src="../images/footer-erweima.png" alt="下载APP" />
                        </dt>
                        <dd>下载享更多优惠</dd>
                    </dl>
                </div>
            </div>
        </div>
    </header>

    <div class="login-background">
        <div class="content-box">
            <div class="form-login-box">
                <div class="login-regi-title">
                    <h2 class="active">用户注册</h2>
                </div>
                <div class="form-content">
                    <form method="get">
                        <ul>
                            <li>
                                <input class="usertel" type="text" placeholder="输入手机号码">
                                <i></i>
                            </li>
                            <li>
                                <input class="userpwd" type="password" placeholder="密码：请输入8～20字符，需同时包含英文和数字">
                                <i></i>
                            </li>
                            <li>
                                <input class="confirmPwd" type="password" placeholder="确认密码">
                                <i class="week"></i>
                            </li>
                            <li>
                                <input type="text" id="datetimepicker" autocomplete="off" placeholder="请选择生日">
                            </li>
                            <li class="err-text">
                                <span></span>
                            </li>
                            <li><input type="button" class="login-button" value="注册"></li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <div class="footer">
            <img class="footer-logo" src="../images/footer-logo.png" height="36" width="96" alt="">
            <div class="footer-nav">
                <a>联系我们</a>
                <span>|</span>
                <a>订购帮助</a>
                <span>|</span>
                <a>企业合作</a>
                <span>|</span>
                <a>生产经营资质</a>
                <span>|</span>
                <a>公告专区</a>
            </div>
            <div class="footer-icon">
                <a href="http://weibo.com/21cake" target="_blank">
                    <img src="../images/footericon-01.png">
                </a>
                <a class="footer-weixin">
                    <div class="footer-erweima footer-weixin-erweima">
                        <img src="../images/erweima.png">
                    </div>
                    <img src="../images/footericon-02.png">
                </a>
                <a class="footer-app">
                    <div class="footer-erweima footer-app-erweima">
                        <img src="../images/footer-erweima.png">
                    </div>
                    APP
                </a>
            </div>

            <div class="footer-text">
                <span>订购专线：400 650 2121（服务时间 08:00–22:00）</span>
                <span>客服电话：021-23099721（全国） | kefu@21cake.com（邮箱）</span>
                <span>杭州/广州：提前5小时预订；北京：提前6小时预订；上海：提前5.5-6小时预订；天津/苏州/无锡/深圳：提前8小时预订（部分偏远地区除外，当日22点以后订单，于次日8点开始审核） </span>
                <span>当日蛋糕配送截止下单时间：北京：16:50；上海：16:30；杭州/广州：13:50；天津：10:30；苏州/无锡/深圳：11:00</span>
                <span>网站注册公司名称: 北京廿一客食品有限公司 地址: 北京市北京经济技术开发区兴海二街5号院3号楼 </span>
            </div>
            <div class="footer-copyright">
                <span>Copyright© 21Cake蛋糕官网商城 2007-2018, 版权所有 <a style="color: #9a9a9a" target="_blank" href="http://www.miitbeian.gov.cn/">京ICP备14006254号-1</a></span>
            </div>
        </div>
    </footer>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/header.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/bootstrap-datetimepicker.js"></script>
<script src="../js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script>
    //头部的显隐事件
    header();

    //bs日期选择器
    $('#datetimepicker').datetimepicker({
        format: 'yyyy-mm-dd',
        weekStart: 1,
        autoclose: true,
        startView: 4,
        minView: 2,
        maxView: 4,
        language: 'zh-CN',
        initialDate: new Date('1990'),
        bootcssVer: 3
    });

    //注册信息验证
    var userPwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/;
    var userTelReg = /^1[3456789][0-9]{9}$/i;

    //电话号码失焦事件
    $(".usertel").blur(function () {
        checkStrByReg($(".usertel").val(), userTelReg, "请输入正确的手机号", ".usertel");
    });
    //密码失焦事件
    $(".userpwd").blur(function () {
        checkStrByReg($(".userpwd").val(), userPwdReg, "密码由8～20个字符，需同时包含英文和数字", ".userpwd");
    });
    //确认密码失焦事件
    $(".confirmPwd").blur(function () {
        checkPwdByReg($(".userpwd").val(), $(".confirmPwd").val(), userPwdReg, ".userpwd", ".confirmPwd");
    });

    //注册按钮点击事件
    $(".login-button").click(function (e) {
        let confirmPwdFlag = checkPwdByReg($(".userpwd").val(), $(".confirmPwd").val(), userPwdReg, ".userpwd", ".confirmPwd");
        let userPwdFlag = checkStrByReg($(".userpwd").val(), userPwdReg, "密码由8～20个字符，需同时包含英文和数字", ".userpwd");
        let userTelFlag = checkStrByReg($(".usertel").val(), userTelReg, "请输入正确的手机号", ".usertel");
        if (userPwdFlag && userTelFlag && confirmPwdFlag) {
            $.ajax({
                type: "get",
                url: "../php/register.php",
                data: {
                    usertel: $(".usertel").val(),
                    userpwd: $(".userpwd").val(),
                    userbirthday: $("#datetimepicker").val()
                },
                dataType: "json",
                success: function (obj) {
                    if (obj["code"] === 1) {
                        location.replace("login.html");
                    } else {
                        $(".err-text span").html("");
                        $(".err-text span").html("该用户已存在");
                    }
                }
            });
        }else if(!userPwdFlag){
            $(".err-text span").html("密码由8～20个字符，需同时包含英文和数字");
        }else if(!userTelFlag){
            $(".err-text span").html("请输入正确的手机号");
        }else if(!confirmPwdFlag){
            $(".err-text span").html("密码不一致");
        }
    });

    /*
   * 根据传入的正则表达式和字符串进行判断，然后进行相应的操作
   * 返回值为 Boolean
   * */
    function checkStrByReg(str, reg, errStr, objStr) {
        if (reg.test(str)) {
            $(".err-text span").html("");
            $(objStr).next().show();
            return true;
        } else {
            $(objStr).next().hide();
            $(".err-text span").html("");
            $(".err-text span").html(errStr);
            return false;
        }
    }

    /*
     * 根据传入的正则表达式和密码字符串，确认密码字符串进行判断，然后进行相应的操作
     * 返回值为 Boolean
     * （密码强弱判断）
     * （密码是否一致）
     * （密码格式是否正确）
     * */
    function checkPwdByReg(pwd1, pwd2, reg, objStr1, objStr2) {
        if (pwd1 === pwd2) {
            if (reg.test(pwd2)) {
                let numReg = /[0-9]/g;
                let toUpperReg = /[A-Z]/g;
                let toLowerReg = /[a-z]/g;
                let numCount = numReg.test(pwd1) ? 1 : 0;
                let toUpperCount = toUpperReg.test(pwd1) ? 1 : 0;
                let toLowerCount = toLowerReg.test(pwd1) ? 1 : 0;
                let count = numCount + toUpperCount + toLowerCount;
                switch (count) {
                    case 1:
                        $(objStr1).next().addClass("weak").show();
                        break;
                    case 2:
                        $(objStr1).next().addClass("moderate").show();
                        break;
                    case 3:
                        $(objStr1).next().addClass("strong").show();
                        break;
                }
                $(objStr2).next().show();
                $(".err-text span").html("");
                return true;
            } else {
                $(objStr1).next().hide();
                $(objStr2).next().hide();
                $(".err-text span").html("");
                $(".err-text span").html("密码由8～20个字符，需同时包含英文和数字");
                return false;
            }
        } else {
            $(".err-text span").html("");
            $(".err-text span").html("密码不一致");
            return false;
        }
    }

</script>

</html>